<style scoped>
	.c-panel{margin: 0px; padding: 0px 20px;}
</style>

<template>
	<el-dialog
		v-if="m"
		:title="'车位详情'"
		:visible.sync="isShow"
		width="450px"
		top="25vh"
		:append-to-body="true"
		:destroy-on-close="true"
		:close-on-click-modal="false"
		custom-class="full-dialog"
		>
		<div class="vue-box">
			<div class="c-panel">
				<!-- 参数栏 -->
				<br>
				<el-form label-width="280px">
					<el-form-item label="编号:" label-width="120px">
						<el-input v-model="m.parkingId" disabled></el-input>
					</el-form-item>
					<el-form-item label="地址:" label-width="120px" >
						<el-input v-model="m.parkingAddress" style="width:270px" disabled></el-input>
					</el-form-item>
					<el-form-item label="租金(元/小时):" label-width="120px">
						<el-input v-model="m.parkingRent" disabled></el-input>
					</el-form-item>
					<el-form-item label="要停车辆:" label-width="120px">
					<el-select size="mini" v-model="selectVal" placeholder="请选择" @change='handleChange'>
						<!-- <el-option label="请选择" :value="0"></el-option> -->
						<el-option v-for="car in cars" :label="car.plateNumber" :value="car.carid" :key="car.carid"></el-option>
					</el-select>
					<!-- car.carid.toString() -->
					</el-form-item>
					<el-form-item label="租用时间(小时):" type="number" label-width="120px">
						<el-input v-model="time"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button size="small" @click="isShow = false">返 回</el-button>
			<el-button size="small" type="primary" @click="ok()">停 车</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import mockDataList from './mock-data-list.js';
	export default {
		data() {
			return {
				selectVal: this.value || '',
				time: 0,
				isShow: false,
				id: 0,
				m: null,
				uid: null,
				cars: [],
				carid: null,
			}
		},
		methods: {
			// 打开 
			open: function(uid,data) {
				this.sa.ajax('/e-renter/car/selectcarByUid',
				{uid},
				function(res){
					this.cars = res.data;
				}.bind(this)),
				{"type":"post"}
				this.isShow = true;	 
				this.uid = uid;
				this.m = data;	
			},
			// 表单验证  
			submit_check: function() {
				var sa = this.sa;
				if(this.time<=0) {
					return sa.error('请输入租用时间');
				}
				return 'ok';
			},
			// 提交 
			ok: function() {
				// 表单验证 
				if(this.submit_check() != 'ok') {
					return;
				}
				let self = this; 
				this.sa.ajax('/e-renter/order/addOrder', {parkingId:this.m.parkingId,uid:this.uid, time:this.time,carid:this.selectVal,rent:this.m.parkingRent}, function(res){
					alert(res.data)
					self.sa.alert('创建订单成功', function(){
						self.$parent.begin();	// 父视图刷新 
						self.isShow = false;
						var tab = {id: '15-1', name: '订单', view: () => import('@/sa-view/wmy/order.vue'), params: {uid: self.uid} };
						self.sa_admin.showTab(tab);  
					}); 
				}.bind(this)),
				{"type":"post"};
			},handleChange(data) {
				console.log(data)
			//如果上面:value赋的是对象，则可以将返回的对象赋予其他变量，这里的data是选中的对象，那么data.label则是reasonTypes中的label值，如果下拉中选中美国，那么this.selectVal 值为“美国”
			this.selectVal = data;
			},  
			// 创建一个空的model 
			create_m: function() {
				return {
					id: 0, 
					name: '', 
					icon: '',
					avatar: 'http://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2020/01/19/15794196587511189314194.png', 
					money: 99.99,
					status: 1,
					create_time: new Date()
				}
			},
			// 遍历判断， 获取模拟数据  
			getMockData: function(id) {
				var data = null;
				// 遍历判断 
				mockDataList.data.forEach(function(item) {
					if(item.id == id) {
						data = item;
					}
				})
				// 创建模拟数据 
				var mockData = {
					code: 200,
					msg: 'ok',
					data: data
				}
				return mockData;
			}
		},
		created: function(){
			
		}
	}
</script>
